<template>
    <el-dialog
      title="输入消息内容"
      :visible.sync="visible"
      width="400px"
      append-to-body
      @close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="消息内容" prop="data">
          <el-input v-model="form.data" placeholder="请输入消息内容" />
        </el-form-item>
      </el-form>
      <div style="margin-top: 10px; display: flex; justify-content: center;">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button type="danger" @click="handleClose">取消</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  export default {
    name: "InputDialog",
    data() {
      return {
        visible: false, // 控制弹窗显示
        form: {
          data: "", // 用户输入的消息内容
        },
      };
    },
    methods: {
      open() {
        this.visible = true;
      },
      handleClose() {
        this.visible = false;
        this.form.data = ""; // 清空输入内容
      },
      handleConfirm() {
        this.$emit("confirm", this.form.data); // 将用户输入的内容传递给父组件
        this.handleClose();
      },
    },
  };
  </script>